//1. 导入依赖
import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';// 获取路由参数和导航
import { fetchProductById } from '../services/api'; // 根据ID获取商品详情的API函数
import { Button, Card, WingBlank, WhiteSpace, Toast } from 'antd-mobile';
import { useCart } from '../context/CartContext';// 购物车上下文，用于添加商品
import LoadingSkeleton from '../components/LoadingSkeleton';

//2. 组件状态与路由参数
const ProductDetail = () => {
  const { id } = useParams(); // 从路由参数中获取商品ID
  const navigate = useNavigate();// 获取导航函数
  const { addToCart } = useCart();// 从购物车上下文中获取添加商品的方法
  const [product, setProduct] = useState(null); // 商品详情
  const [loading, setLoading] = useState(true);// 加载状态
  const [quantity, setQuantity] = useState(1);// 购买数量，默认为1

  //3. 数据获取（副作用）
  useEffect(() => {
    const loadProduct = async () => {
      try {
        setLoading(true);
        const data = await fetchProductById(id); // 根据ID获取商品详情
        setProduct(data);// 设置商品数据
      } catch (error) {
        console.error('加载商品详情失败:', error);
        navigate('/');// 出错则跳转到首页
      } finally {
        setLoading(false); // 无论成功失败，都取消加载状态
      }
    };
    
    loadProduct();
  }, [id, navigate]);// 依赖id和navigate，当id变化时重新加载



  //4. 加入购物车处理函数
  const handleAddToCart = () => {
    if (!product) return; // 如果没有商品数据，直接返回

     // 调用购物车上下文的addToCart方法，添加商品信息（包括用户选择的数量）
    addToCart({
      id: product.id,
      name: product.name,
      price: product.price,
      image: product.image,
      stock: product.stock,
      quantity
    });
    
    Toast.success('已添加到购物车', 1.5);
  };


  //5. 条件渲染：加载中或商品不存在
  if (loading || !product) {
    return (
      <div style={{ padding: '20px' }}>
        <LoadingSkeleton />
      </div>
    );
  }


  // 6. 商品详情页面渲染
  return (
    <div>
      <h1 className="page-title">商品详情</h1>
      
      <WingBlank size="lg">
           {/* 商品卡片 */}
        <Card>
          <Card.Header
            title={product.name}
            thumb={product.image}
            thumbStyle={{ width: '100px', height: '100px' }}
          />
          <Card.Body>
            <div style={{ marginBottom: '15px' }}>
              <p style={{ fontSize: '18px', color: '#ff4d4f', marginBottom: '10px' }}>
                ¥{product.price.toFixed(2)}
              </p>
              <p style={{ marginBottom: '10px' }}>{product.description}</p>
              <p>库存: {product.stock > 0 ? `${product.stock}件` : '缺货'}</p>
              <p>类别: {product.category}</p>
            </div>
          </Card.Body>
        </Card>
        
        <WhiteSpace size="lg" />
              {/* 数量选择 */}
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
          <span style={{ marginRight: '15px', fontWeight: '500' }}>数量:</span>
          <div style={{ flex: 1 }}>
            <input
              type="number"
              min="1"
              max={product.stock}
              value={quantity}
              onChange={(e) => {
                     // 确保输入的值在1到库存之间，如果输入无效则默认为1
                const value = Math.max(1, Math.min(product.stock, parseInt(e.target.value) || 1));
                setQuantity(value);
              }}
              style={{
                width: '80px',
                padding: '8px 12px',
                border: '1px solid #ddd',
                borderRadius: '4px',
                fontSize: '16px'
              }}
            />
          </div>
        </div>
              {/* 按钮组 */}
        <div style={{ display: 'flex', gap: '10px' }}>
          <Button 
            type="primary" 
            style={{ flex: 1 }} 
            disabled={product.stock === 0}// 如果缺货则禁用按钮
            onClick={handleAddToCart}
          >
            {product.stock > 0 ? '加入购物车' : '已售罄'}{/* 根据库存显示不同文本 */}
          </Button>
          <Button 
            style={{ flex: 1 }} 
            onClick={() => navigate('/cart')}
          >
            查看购物车
          </Button>
        </div>
      </WingBlank>
    </div>
  );
};

export default ProductDetail;